<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">

  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>购物车</title>
    <script src="./js/goods.js"></script>
    <script type="text/javascript" src="./js/vue.js"></script>
    <link href="./css/index.css" rel="stylesheet" type="text/css" />
  </head>

<body>
  <div id="app">
    <!-- 商品列表 -->
    <h3>商品列表</h3>
    <ul id="goodsList">
      <template v-for="goods in goodsList">
        <li class="goods-item" :key="goods.id">
          <div><img :src="goods.imgUrl" /> </div>
          <div>{{goods.name}}</div>
          <div>¥ {{goods.price}} </div>
          <button @click="addToCart(goods)">加入购物车</button>
        </li>
      </template>
    </ul>
    <!-- 购物车 -->
    <template v-if="cartList.length>0">
      <h3>购物车</h3>
      <ul id="cartList">
        <template v-for="goods in cartList">
          <li class="goods-item" :key="goods.id">
            <div><img :src="goods.imgUrl" /> </div>
            <div>{{goods.name}}</div>
            <div>¥ {{goods.price}} </div>
            <div class="item-control">
              <button @click="removeGoods(goods)">-</button>
              <h4>{{goods.num}}</h4>
              <button @click="addToCart(goods)">+</button>
            </div>
          </li>
        </template>
      </ul>
    </template>
  </div>
</body>

</html>

<script>
  new Vue({
    el: '#app',
    data: {
      cartList: [],
      goodsList: []
    },
    mounted() {
      this.goodsList = GoodsArr;
    },
    methods: {
      addToCart(goods) {
        // TODO：修改当前函数，实现购物车加入商品需求
        // goods.num = 1;
        // this.cartList.push(goods);
        // this.cartList = JSON.parse(JSON.stringify(this.cartList));
        let index = this.cartList.findIndex(item => item.id === goods.id);
        if (index === -1) {
          goods.num = 1;
          this.cartList.push(goods);
        } else {
          this.cartList[index].num++;
        }
        this.cartList = JSON.parse(JSON.stringify(this.cartList));
      },
      removeGoods(goods) {
        // TODO：补全代码实现需求
        if (goods.num > 1) {
          goods.num--;
        } else {
          this.cartList.splice(this.cartList.indexOf(goods), 1);
        }
        this.cartList = JSON.parse(JSON.stringify(this.cartList));
      }
    }
  });
</script>